<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /路线详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="#" title class="c-999 fsize14">首页</a>
        \
        <a href="#" title class="c-999 fsize14">{{routeDetail.destParentName}}</a>
        \
        <span class="c-333 fsize14">{{routeDetail.destName}}</span>
      </section>
      <div>
        <article class="c-v-pic-wrap" style="height: 357px;">
          <section class="p-h-video-box" id="videoPlay">
            <img
              height="357px"
              :src="routeDetail.cover"
              :alt="routeDetail.title"
              class="dis c-v-pic"
            />
          </section>
        </article>
        <aside class="c-attr-wrap">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-fff fsize24">{{routeDetail.title}}</span>
            </h2>
            <section class="c-attr-jg">
              <span class="c-fff">价格：</span>
              <b class="c-yellow" style="font-size:24px;">￥{{routeDetail.price}}</b>
            </section>
            <section class="c-attr-mt c-attr-undis">
              <span class="c-fff fsize14">主题：{{routeDetail.theme}}&nbsp;&nbsp;&nbsp;</span>
            </section>
            <!-- 收藏功能 -->
            <section class="c-attr-mt of">
              <span v-if="isCollect" class="ml10 vam sc-end">
                <em class="icon18 scIcon" />
                <a
                  style="cursor:pointer"
                  class="c-fff vam"
                  title="取消收藏"
                  @click="removeCollect()"
                >已收藏</a>
              </span>
              <span v-else class="ml10 vam">
                <em class="icon18 scIcon" />
                <span
                  style="cursor:pointer"
                  class="c-fff vam"
                  title="收藏"
                  @click="isLoginAndCollect()"
                >收藏</span>
              </span>
            </section>
            <section class="c-attr-mt" v-if="!isBuy">
              <a
                @click="isLoginAndCreateOrder()"
                href="#"
                title="立即购买"
                class="comm-btn c-btn-3"
              >立即购买</a>
            </section>
            <section class="c-attr-mt" v-else>
              <a :href="'/ucenter/route/order'" title="立即购买" class="comm-btn c-btn-3">查看订单</a>
            </section>
          </section>
        </aside>
        <aside class="thr-attr-box">
          <ol class="thr-attr-ol">
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">销量</span>
                <br />
                <h6 class="c-fff f-fM mt10">{{routeDetail.buyCount}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">天数</span>
                <br />
                <h6 class="c-fff f-fM mt10">{{routeDetail.day}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">浏览数</span>
                <br />
                <h6 class="c-fff f-fM mt10">520</h6>
              </aside>
            </li>
          </ol>
        </aside>
        <div class="clear"></div>
      </div>
      <!-- 路线详情 -->
      <el-divider></el-divider>
      <!--别忘了添加class="markdown-body"，否则没法渲染-->
      <!-- <div class="markdown-body" v-html="routeDetail.description"></div> -->
      <div class="content">
        <mavon-editor
          class="md"
          :value="routeDetail.description"
          :subfield="prop.subfield"
          :defaultOpen="prop.defaultOpen"
          :toolbarsFlag="prop.toolbarsFlag"
          :editable="prop.editable"
          :scrollStyle="prop.scrollStyle"
        />
      </div>
      <!-- /路线详情-->

      <!-- 课程评论 -->
      <div class="mt50 commentHtml">
        <div>
          <h6 class="c-c-content c-infor-title" id="i-art-comment">
            <span class="commentTitle">课程评论</span>
          </h6>
          <section class="lh-bj-list pr mt20 replyhtml">
            <ul>
              <li class="unBr">
                <aside class="noter-pic">
                  <img width="50" height="50" class="picImg" src="~/assets/img/loading.gif" />
                </aside>
                <div class="of">
                  <section class="n-reply-wrap">
                    <fieldset>
                      <textarea
                        name
                        v-model="comment.content"
                        placeholder="输入您要评论的文字"
                        id="commentContent"
                      ></textarea>
                    </fieldset>
                    <p class="of mt5 tar pl10 pr10">
                      <span class="fl">
                        <tt class="c-red commentContentmeg" style="display: none;"></tt>
                      </span>
                      <input type="button" @click="addComment()" value="回复" class="lh-reply-btn" />
                    </p>
                  </section>
                </div>
              </li>
            </ul>
          </section>
          <section class>
            <section class="question-list lh-bj-list pr">
              <ul class="pr10">
                <li v-for="(comment,index) in data.list" v-bind:key="index">
                  <aside class="noter-pic">
                    <img width="50" height="50" class="picImg" :src="comment.avatar" />
                  </aside>
                  <div class="of">
                    <span class="fl">
                      <font class="fsize12 c-blue">{{comment.nickname}}</font>
                      <font class="fsize12 c-999 ml5">评论：</font>
                    </span>
                  </div>
                  <div class="noter-txt mt5">
                    <p>{{comment.content}}</p>
                  </div>
                  <div class="of mt5">
                    <div style="text-align: right;">
                      <input
                        type="button"
                        @click="deleteComment(comment.id)"
                        value="删除"
                        class="lh-reply-btn"
                      />
                    </div>
                  </div>

                  <div class="of mt5">
                    <span class="fr">
                      <font class="fsize12 c-999 ml5">{{comment.gmtCreate}}</font>
                    </span>
                  </div>
                </li>
              </ul>
            </section>
          </section>

          <!-- 公共分页 开始 -->
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)"
            >首</a>
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(data.current-1)"
            >&lt;</a>
            <a
              v-for="page in data.pages"
              :key="page"
              :class="{current: data.current == page, undisable: data.current == page}"
              :title="'第'+page+'页'"
              href="#"
              @click.prevent="gotoPage(page)"
            >{{ page }}</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(data.current+1)"
            >&gt;</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="末页"
              @click.prevent="gotoPage(data.pages)"
            >末</a>
            <div class="clear" />
          </div>
          <!-- 公共分页 结束 -->
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import commentApi from "@/api/comment";
import cookie from "js-cookie";
import routeApi from "@/api/route";
import orderApi from "@/api/order";
import collectApi from "@/api/collect";
import loginApi from "@/api/loginApi";
import "github-markdown-css/github-markdown.css";
export default {
  asyncData({ params, error }) {
    return {
      routeId: params.id,
    };
  },
  data() {
    return {
      data: {}, //评论列表
      page: 1, //当前页
      comment: {
        content: "",
        routeId: "",
      },
      isCollect: false,
      routeDetail: {},
      isBuy: false,
      member: {
        id: "",
      },
      routeCollect: {},
    };
  },
  created() {
    //初始化评论列表
    this.initComment();
    //初始化路线详情页
    this.initRouteDetail();
    const token = cookie.get("travel_token");
    // 如果已登录，则判断是否已收藏
    if (token) {
      console.log("token", token);
      loginApi.getUserInfo().then((response) => {
        this.member = response.data.data.userInfo;
      });
      collectApi.isCollect(this.routeId).then((response) => {
        console.log("isCollect", response.data.data.isCollect);
        this.isCollect = response.data.data.isCollect;
      });
    }
  },
  computed: {
    // 解析器配置
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false, // 是否允许编辑
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },
  methods: {
    //获取所有的评论
    initComment() {
      commentApi.GetCommentList(this.page, 4, this.routeId).then((response) => {
        console.log("评论列表", response.data.data);
        this.data = response.data.data;
      });
    },
    //添加评论
    addComment() {
      //判断是否登录
      const token = cookie.get("travel_token");
      // 如果未登录，提示登录
      if (token) {
        this.comment.routeId = this.routeId;
        this.comment.memberId = this.member.id;
        this.comment.nickname = this.member.nickname;
        this.comment.avatar = this.member.avatar;
        commentApi.addComment(this.comment).then((response) => {
          this.$message({
            type: "success",
            message: "评论成功",
          });
          this.comment.content = ""
          this.initComment()
        });
      } else {
        this.$message({
          type: "error",
          message: "请先登录️再进行下一步操作",
        });
        //vue路由跳转
        this.$router.push({
          path: "/login",
        });
      }
    },
    //页面跳转
    gotoPage(page) {
      commentApi.getCommentList(page, 4).then((response) => {
        this.data = response.data.data;
      });
    },
    //判断是否登陆+立即购买
    isLoginAndCreateOrder() {
      //判断是否登录
      const token = cookie.get("travel_token");
      // 如果未登录，提示登录
      if (token) {
        this.createOrders();
      } else {
        this.$message({
          type: "error",
          message: "请先登录️再进行下一步操作",
        });
        //vue路由跳转
        this.$router.push({
          path: "/login",
        });
      }
    },
    //判断是否登陆再收藏
    isLoginAndCollect() {
      //判断是否登录
      const token = cookie.get("travel_token");
      // 如果未登录，提示登录
      if (token) {
        this.routeCollect.routeId = this.routeDetail.id;
        this.routeCollect.memberId = this.member.id;
        collectApi.collect(this.routeCollect).then((response) => {
          this.isCollect = true;
          this.$message({
            type: "success",
            message: "收藏成功",
          });
        });
      } else {
        this.$message({
          type: "error",
          message: "请先登录️再进行下一步操作",
        });
        //vue路由跳转
        this.$router.push({
          path: "/login",
        });
      }
    },
    //移除收藏
    removeCollect() {
      collectApi.removeCollect(this.routeDetail.id).then((response) => {
        this.isCollect = false;
        this.$message({
          type: "success",
          message: "已取消收藏",
        });
      });
    },

    //初始化路线详情
    initRouteDetail() {
      routeApi.getRouteDetail(this.routeId).then((response) => {
        const _this = this;
        console.log("路线详情", response.data.data);
        const routeDetail = response.data.data.routeDetail;
        (_this.routeDetail = response.data.data.routeDetail),
          //正文我们需要markdown解析，然后再使用github的css样式
          (_this.isBuy = response.data.data.isBuy);
        var MarkdownIt = require("markdown-it");
        var md = new MarkdownIt();
        var result = md.render(_this.routeDetail.description);
        _this.routeDetail.description = result;
      });
    },
    //生成订单
    createOrders() {
      orderApi.createOrder(this.routeId).then((response) => {
        //获取返回订单号
        //生成订单之后，跳转订单显示页面
        this.$router.push({ path: "/order/" + response.data.data.orderNo });
      });
    },
  },
};
</script>
<style scoped>
.mblog {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 100%;
  min-height: 700px;
  padding: 20px 15px;
}
</style>